<template>
	<div class="fmain-column">
		<div style="height: 50px;">
			
			<!-- header start -->
			<ly-frow-center class="marrS">
				<span class="jsgl">
					教室管理
					<div class="san1"></div>
					<div class="san2"></div>
				</span>
				<el-button size="small" icon="el-icon-s-platform" class="marl">添加教室</el-button>
				<el-autocomplete clearable size="mini" suffix-icon="el-icon-search" 
				 class="marl"
				 style="position: relative;left:-10px;border: 1px solid #ddd;"
				 v-model="state"
				 placeholder="班级名称" :trigger-on-focus="false" 
				 @select="handleSelect" ></el-autocomplete>
			</ly-frow-center>
			<!-- header end -->
			
		</div>
		<div style="flex: 1;">
			<ly-box>
					
					<!-- table start -->
					<el-table :data="tableData" border style="width: 100%">
						<el-table-column fixed prop="date" label="日期" width="150"> </el-table-column>
						<el-table-column prop="name" label="姓名" width="120"> </el-table-column>
						<el-table-column prop="province" label="省份" width="120"> </el-table-column>
						<el-table-column prop="city" label="市区" width="120"> </el-table-column>
						<el-table-column prop="address" label="地址" max-width="600"> </el-table-column>
						<el-table-column prop="zip" label="邮编" width="120"> </el-table-column>
						<el-table-column fixed="right" label="操作" width="100">
							<template #default="scope">
								<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
								<el-button type="text" size="small">编辑</el-button>
							</template>
						</el-table-column>
					</el-table>
					<!-- table end -->
					
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="currentPage4"
						:page-sizes="[100, 200, 300, 400]"
						:page-size="100"
						layout="total, sizes, prev, pager, next, jumper"
						:total="400">
					</el-pagination>
							
			</ly-box>
		</div>
	</div>
</template>
 
<script>
	export default {
	    methods: {
	      handleClick(row) {
	        console.log(row);
	      }
	    },
	
	    data() {
	      return {
					// table
					state: '',
					querySearch: '',
					handleSelect: '',
	        tableData: [{
	          date: '2016-05-02',
	          name: '王小虎',
	          province: '上海',
	          city: '普陀区',
	          address: '上海市普陀区金沙江路 1518 弄',
	          zip: 200333
	        }, {
	          date: '2016-05-04',
	          name: '王小虎',
	          province: '上海',
	          city: '普陀区',
	          address: '上海市普陀区金沙江路 1517 弄',
	          zip: 200333
	        }, {
	          date: '2016-05-01',
	          name: '王小虎',
	          province: '上海',
	          city: '普陀区',
	          address: '上海市普陀区金沙江路 1519 弄',
	          zip: 200333
	        }, {
	          date: '2016-05-03',
	          name: '王小虎',
	          province: '上海',
	          city: '普陀区',
	          address: '上海市普陀区金沙江路 1516 弄',
	          zip: 200333
	        }]
	      }
	    }
	  }
</script>

<style lang="less" scoped>
.fmain-column{background-color: white;}
.jsgl{
	height: 50px;
	line-height: 50px;
	width: 110px;
	text-align: center;
	background-color: #dfe3ec;
	position: relative;
	.san1{
		width: 0;
		height: 0;
		border-right: 15px solid transparent;
		border-bottom: 25px solid #dfe3ec;
		position: absolute;
		top: 0;
		right: -15px;
	}
	.san2{
		width: 0;
		height: 0;
		border-right: 15px solid transparent;
		border-top: 25px solid #dfe3ec;
		position: absolute;
		top: 25px;
		right: -15px;
	}
}
</style>
